<!-- 正文开始 -->
<style>
    :root {
        --theme1: #2CBB79; /*主题颜色1*/
        --bgColor1: #fff; /*图表背景颜色*/
    }

    .layui-body-header + div {
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        bottom: 0;
        overflow: auto;
    }

    .share1 > div {
        width: 100%;
    }

    .share2 > div {
        width: calc((100% - 20px) / 2);
    }

    .share3 > div {
        width: calc((100% - 40px) / 3);
    }

    .share4 > div {
        width: calc((100% - 60px) / 4);
    }

    .share5 > div {
        width: calc((100% - 80px) / 5);
    }

    .share6 > div {
        width: calc((100% - 100px) / 6);
    }

    .layui-fluid {
        padding: 0 10px 0 20px;
        overflow-y: auto;
    }

    .layui-form-select dl dd.layui-this {
        background-color: var(--theme1)
    }

    form[lay-filter="materialDataForm"] .layui-table-body::-webkit-scrollbar {
        /*overflow: scroll;*/
        /*display: none;*/
        /*width: 3px;*/
    }

    /* div[lay-id="materialDataTable"] .layui-table-body {
         width: calc(100% + 5px);
     }*/

    /*头部标题 时间选择*/
    .headerBox {
        display: flex;
        /*margin: 0 0 20px;*/
        padding-bottom: 20px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        z-index: 9999;
        background-color: #F0F2F5;
    }

    .headerTitle {
        height: 26px;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        position: relative;
        padding: 0 16px;
        display: flex;
        align-items: center;
    }

    .headerTitle:before {
        content: "";
        display: block;
        height: 100%;
        width: 6px;
        background: #009C5E;
        position: absolute;
        left: 0;
        top: 0;
    }

    .headerTime {
        display: flex;
    }

    .headerTime .timeSelect {
        width: 110px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        box-sizing: border-box;
        border: 1px solid #EDEFF4;
        margin-right: 10px;
    }

    .headerTime .selectBox {
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        box-sizing: border-box;
        border: 1px solid #EDEFF4;
        margin-right: 10px;
    }

    .headerTime .timeFreedom {
        box-sizing: border-box;
        width: 270px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #EDEFF4;
        padding: 0 10px;
        line-height: 38px;
        display: flex;
    }

    .timeFreedom input,
    .headerTime .timeSelect input,
    .headerTime .selectBox input {
        height: 48px;
        line-height: 48px;
        border-width: 0;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        background-color: transparent;
    }

    .timeFreedom .layui-icon {
        font-size: 30px;
        margin-top: 5px;
    }

    .timeFreedom input {
        width: calc(100% - 30px);
        display: inline-block;
    }

    .timeFreedom input::placeholder {
        font-size: 16px;
    }

    /*头部数据统计样式*/
    .statBox {
        margin-bottom: 20px;
    }

    .statBox > div {
        display: none;
        transition: all 300ms;
    }

    .statBox > div.active {
        display: flex;
    }

    .statBoxItem {
        display: flex;
        justify-content: space-between;
    }

    .statBoxItem > .statBoxItemList {
        box-sizing: border-box;
        padding: 28px 20px;
        height: 132px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        display: flex;
        cursor: pointer;
        flex: 1;
        margin-right: 20px;
        transition: all 1000ms;
    }

    .statBoxItem > .statBoxItemList:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
    }

    .statBoxItem > .statBoxItemList:last-child {
        margin-right: 0;
    }

    .statBoxItemList > .statBoxItemListContent {
        flex: 1;
    }

    .statBoxItemListImg {
        width: 70px;
        height: 70px;
        margin-top: 3px;
    }

    .statBoxItemListContent .statBoxItemListName {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        margin-bottom: 10px;
    }

    .statBoxItemListContent .statBoxItemListNum {
        font-size: 24px;
        font-weight: bold;
        color: #333333;
        line-height: 42px;
    }

    /* 报表内容区域*/
    .reportMain {
        width: 100%;
    }

    .reportMain .layui-form-select .layui-input {
        width: auto;
        padding-right: 30px;
    }

    .headerTime .selectBox .layui-input {
        width: auto;
        padding-right: 10px;
    }

    .reportBox {
        display: flex;
        font-family: Roboto-Regular, Roboto;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .reportBox > div {
        flex: 1;
        background-color: var(--bgColor1);
        height: 460px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 10px 20px;
        transition: all 1000ms;
        box-sizing: border-box;
        overflow: hidden;
        /*min-width: 520px;*/
    }

    .reportBoxS > div {
        flex: none;
        margin-right: 0;
    }

    .reportBox > div:last-child {
        margin-right: 0;
    }

    .reportBox > div:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
        border-radius: 5px 5px 5px 5px;
    }

    .reportItem {
        display: flex;
        flex-direction: column;
    }

    .reportItemBox {
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .reportItemBox::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    .reportItemBox::-webkit-scrollbar {
        width: 5px;
    }

    .reportItemBox:hover::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }

    .reportItemBox .reportItemEcharts {
        width: 100%;
        height: 100%;
    }

    .reportItemBox .reportItemCenter {
        width: 100%;
        height: auto;
    }

    .reportItem select,
    .reportItem input {
        width: 110px;
        height: 38px;
        background: #F5F6FA;
        border-radius: 5px 5px 5px 5px;
    }

    .reportItem .layui-form-select .layui-edge {
        border-top-color: var(--theme1)
    }


    .reportItem > .reportItemHeader {
        display: flex;
        height: 40px;
        align-items: center;
    }

    .reportItemHeaderTitle {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height: 23px;
    }

    .reportItemHeaderSwitch {
        width: 106px;
        height: 24px;
        background: #9AAEBB;
        border-radius: 16px 16px 16px 16px;
        box-sizing: border-box;
        padding: 2px;
        display: flex;
        margin-right: auto;
        margin-left: 30px;
    }

    .reportItemHeaderSwitchItem {
        width: 51px;
        height: 20px;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        text-align: center;
        line-height: 20px;
        background-color: transparent;
        border-radius: 10px;
        cursor: pointer;
    }

    .reportItemHeaderSwitchItem.active {
        background-color: #fff;
        color: #9AAEBB;
    }

    .reportItemHeaderSelect {
        margin-right: 0;
        margin-left: auto;
    }

    .reportItemHeaderMore {
        margin-left: 30px;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
    }

    .reportItemUnit {
        margin: 5px 0;
        height: 14px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
    }

    .reportItemTips {
        display: flex;
        height: 42px;
        overflow: hidden;
        box-sizing: border-box;
        margin: 5px 0;
    }

    .reportItemTips > div {
        flex: 1;
        height: 42px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #9AAEBB;
        box-sizing: border-box;
        margin-right: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .reportItemTips > div:last-child {
        margin-right: 0;
    }

    .reportItemTips > div img {
        width: 28px;
        height: 28px;
        overflow: hidden;
        margin-right: 10px;
    }

    .reportItemTips > div p {
        font-size: 14px;
        font-weight: 400;
        color: #E55B4A;
        line-height: 16px;
    }

    .colorGrey > div p {
        color: #333333;
    }

    .listBox1 > .listItem1 {
        display: flex;
        align-items: center;
        margin-top: 17px;
    }

    .listItem1 .listItem1Name {
        width: 70px;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem1 .listItem1ProgressBox {
        margin-right: 20px;
        margin-left: 10px;
        flex: 1;
        height: 16px;
        background: #EDEFF2;
        border-radius: 20px;
        display: flex;
        position: relative;
    }

    .listItem1ProgressBox .listItem1ProgressBar {
        height: 100%;
        background: #2CBB79;
        border-radius: 20px;
        /*position: relative;*/
        width: 0;
    }

    .listItem1ProgressBox .listItem1ProgressBar:after {
        content: attr(val);
        position: absolute;
        right: 5px;
        /*transform: translateX(100%);*/
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
        top: 0;
    }

    .listItem1 .listItem1Ratio {
        font-size: 14px;
        font-weight: 500;
        color: #2CBB79;
        line-height: 16px;
        width: 60px;
        overflow: hidden;
    }

    .listBox1 > .listItem1:first-child .listItem1ProgressBox .listItem1ProgressBar {
        background: #FFB94D;
    }

    .listBox1 > .listItem1:first-child .listItem1Ratio {
        color: #FFB94D;
    }

    .listBox2 > .listItem2 {
        display: flex;
        flex-direction: column;
        margin-top: 12px;
    }

    .listItem2 .listItem2Top {
        display: flex;
        font-size: 12px;
        color: #333333;
        line-height: 14px;
        height: 20px;
    }

    .listItem2Top .listItem2Name {
        width: 80px;
        box-sizing: border-box;
        overflow: hidden;
        margin-right: 10px;
        white-space: nowrap;
    }

    .listItem2Top .listItem2Code {
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        flex: 1;
    }

    .listItem2 .listItem2Bottom {
        display: flex;
    }

    .listItem2Bottom .listItem2ProgressBox {
        box-sizing: border-box;
        flex: 1;
        height: 15px;
        border: 1px solid transparent;
        border-radius: 10px;
        background-image: linear-gradient(#fff, #fff), linear-gradient(to right, rgba(182, 205, 106, 1), rgba(0, 156, 94, 1));
        background-origin: border-box;
        background-clip: content-box, border-box;
    }

    .listItem2ProgressBox .listItem2ProgressBar {
        background-image: linear-gradient(to right, #B6CD6A, #009C5E);
        border: 2px solid transparent;
        box-sizing: border-box;
        height: 13px;
        border-radius: 5px;
        background-clip: content-box;
        width: 0;
    }

    .listItem2 .listItem2Val {
        width: 80px;
        margin: 0 10px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
        overflow: hidden;
        cursor: pointer;
    }

    .listItem2 .listItem2Ratio {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #00C573;
        line-height: 16px;
        width: 60px;
        text-align: right;
        overflow: hidden;
    }

    .listBox3Header {
        display: flex;
        height: 52px;
        background: #F2F4F8;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        align-items: center;
    }

    .listItem3 {
        display: flex;
        height: 52px;
        border-bottom: 1px dashed #ccc;
        box-sizing: border-box;
        align-items: center;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        color: #000000;
    }


    .listBox3Header .listBox3HeaderAvatar {
        width: 60px;
        margin-right: 35px;
        text-align: center;
    }

    .listItem3 .listBox3Avatar {
        width: 60px;
        margin-right: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .listItem3 .listBox3Avatar img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .listBox3Header .listBox3HeaderName,
    .listItem3 .listBox3Name {
        flex: 2;
        margin-right: 35px;
    }

    .listBox3Header .listBox3HeaderAbnormal,
    .listItem3 .listBox3Abnormal {
        flex: 2;
        margin-right: 35px;
    }

    .listBox3Header .listBox3HeaderRatio,
    .listItem3 .listBox3Ratio {
        width: 80px;
        text-align: center;
    }

    .listBox4 .listItem4 {
        display: flex;
        margin-top: 10px;
        height: 41px;
        flex-direction: column;
    }

    .listItem4 .listItem4Top {
        display: flex;
        height: 18px;
        line-height: 14px;
    }

    .listItem4Top .listItem4Name {
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        color: #333333;
        width: 70px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
    }

    .listItem4Top .listItem4Code {
        flex: 1;
        font-size: 12px;
        color: #333333;
        box-sizing: border-box;
        overflow: hidden;
    }

    .listItem4 .listItem4Bottom {
        display: flex;
        align-items: center;
    }

    .listItem4Bottom .listItem4ProgressBox {
        height: 8px;
        background: #EDEFF2;
        border-radius: 102px 102px 102px 102px;
        flex: 1;
        margin-right: 10px;
    }

    .listItem4 .listItem4ProgressBox .listItem4ProgressBar {
        height: 8px;
        background: linear-gradient(90deg, #B6CD6A 0%, #009C5E 100%);
        border-radius: 7px 7px 7px 7px;
        position: relative;
    }

    .listItem4 .listItem4ProgressBox .listItem4ProgressBar:before {
        position: absolute;
        content: attr(val);
        right: -5px;
        transform: translate(100%, -50%);
        font-size: 12px;
        font-weight: 600;
        color: #333333;
        line-height: 16px;
        top: 50%;
    }

    .listItem4 .listItem4Ratio {
        width: 100px;
        height: 16px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #2CBB79;
        line-height: 16px;
        text-align: center;
        overflow: hidden;
        margin-left: 20px;
    }

    .listBox4 .listItem4:first-child .listItem4Ratio {
        color: #FFB94D;
    }

    .listBox5 .listItem5 {
        display: flex;
        margin-top: 15px;
        height: 25px;
        flex-direction: column;
    }

    .listItem5 .listItem5Top {
        display: flex;
        height: 14px;
        font-size: 12px;
        color: #333333;
        line-height: 14px;
        margin-bottom: 5px;
    }

    .listItem5Top .listItem5Name {
        width: 100px;
        overflow: hidden;
    }

    .listItem5Top .listItem5Code {
        flex: 1;
        font-family: PingFang SC-Regular, PingFang SC;
        margin: 0 20px;
    }

    .listItem5ProgressBox {
        height: 8px;
        margin-right: 100px;
    }

    .listItem5ProgressBar {
        background-color: #72B65F;
        height: 100%;
        position: relative;
    }

    .listItem5ProgressBar:before {
        position: absolute;
        content: attr(val);
        right: -55px;
        width: 50px;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #333333;
    }

    .listItem5ProgressBar:after {
        position: absolute;
        content: attr(ratio);
        right: -100px;
        width: 50px;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #009C5E;
    }

    .listBox6 > .listItem6 {
        margin-top: 15px;
        width: 100%;
        overflow: hidden;
    }

    .listItem6 > .listItem6Top,
    .listItem6 > .listItem6Bottom {
        display: flex;
        align-items: center;
    }

    .listItem6Top .listItem6Name {
        width: 100px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem6Top .listItem6code {
        flex: 1;
        margin-left: 15px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem6Bottom {
        margin-top: 5px;
    }

    .listItem6Bottom .listItem6ProgressBox {
        flex: 1;
        margin-right: 100px;
        height: 8px;
        background: #EDEFF2;
        border-radius: 102px 102px 102px 102px;
    }

    .listItem6ProgressBox .listItem6ProgressBar {
        height: 8px;
        background: #2CBB79;
        border-radius: 102px 102px 102px 102px;
        position: relative;
    }

    .listItem6ProgressBar:after {
        content: attr(val);
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -110px;
        width: 100px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
    }

    .listItem6Ratio {
        width: 60px;
        font-size: 14px;
        font-weight: 500;
        color: #2CBB79;
        line-height: 16px;

    }

    .listBox6 > .listItem6:first-child .listItem6ProgressBox .listItem6ProgressBar {
        background: #FFB94D;
    }

    .listBox6 > .listItem6:first-child .listItem6Ratio {
        color: #FFB94D;
    }

    .topLayout {
        display: flex;
        justify-content: space-between;
    }

    .notice {
        width: 392px;
        background-color: #fff;
        height: 460px;
        box-sizing: border-box;
        padding: 20px 0 0 20px;
        border-radius: 5px;
        transition: all 1000ms;
    }

    .notice:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
    }

    .noticeHeader {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        height: 25px;
        padding-right: 20px;
    }

    .noticeTitle {
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }

    .noticeMore {
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
        display: none;
    }

    .noticeBox {
        margin-top: 20px;
        height: calc(100% - 50px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 15px;
        position: relative;
    }

    .noticeBoxItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        height: 38px;
        cursor: pointer;
        transition: all 300ms;
    }

    .noticeBoxItem:hover {
        transform: scale(1.05);
    }

    .noticeBoxItem:hover .noticeBoxContent {
        color: #009C5E;
    }

    .noticeBoxList > .noticeBoxItem:first-child > .noticeBoxDrop {
        background: #FFB94D;
    }

    .noticeBoxDrop {
        width: 6px;
        height: 6px;
        background: #E1E5F3;
        border-radius: 50%;
        margin-right: 14px;
    }

    .noticeBoxContent {
        flex: 1;
        overflow: hidden;
        height: 18px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }

    .noticeBoxTime {
        width: 60px;
        height: 18px;
        font-size: 14px;
        overflow: hidden;
        font-weight: 400;
        color: #999999;
        text-align: right;
    }

    .noticeDetailsBox {
        background: #F8F9FD;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #E4ECF4;
        margin-bottom: 15px;
        box-sizing: border-box;
        padding: 20px 30px;
    }

    .noticeDetailsTitle {
        height: 21px;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 19px;
        text-align: center;
        margin-bottom: 20px;
    }

    .noticeDetailsContent {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
    }

    .noticeDetailsBox a {
        color: #01AAED;
        text-decoration: revert;
    }
</style>

<div class="layui-fluid" id="reportBodyBox">
    <div class="reportBody">
        <!-- 领料趋势变化图报表-->
        <div class="reportMain  layui-form topLayout">
            <div class="reportBox" style="width: calc(100% - 412px)">
                <div class="reportItem" id="pickingTrends">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">领料趋势变化图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderSelect">
                            <select name="mainCabCode" lay-filter="mainCabCode"></select>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
            </div>
            <div class="notice">
                <div class="noticeHeader">
                    <div class="noticeTitle">升级公告</div>
                    <div class="noticeMore"> 更多<i class="layui-icon layui-icon-right"></i></div>
                </div>
                <div class="noticeBox">
                    <ul class="noticeBoxList" id="noticeBoxList">
                        <!--<li class="noticeBoxItem">
                            <div class="noticeBoxDrop"></div>
                            <div class="noticeBoxContent layui-elip">
                                此处为通知此处为通知此处为通知此处此处为通知此处为通知此处为通知此处此处为通知此处为通知此处为通知此处此处为通知此处为通知此处为通知此处
                            </div>
                            <div class="noticeBoxTime">11/01</div>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>

        <!-- 标题 时间选择 -->
        <div class="headerBox" id="headerBox">
            <div class="headerTitle">用料数据分析</div>
            <div class="headerTime layui-form">
                <div class="selectBox">
                    <select name="mainCabCode" lay-filter="mainCabCodeAll">
                        <option value="">所有主柜</option>
                    </select>
                </div>
                <div class="timeSelect">
                    <select name="type" lay-filter="timeType">
                        <option value="2">请选择</option>
                        <option value="0">日</option>
                        <option value="1">周</option>
                        <option value="2" selected>月</option>
                    </select>
                </div>
                <div class="timeFreedom">
                    <i class="layui-icon layui-icon-date" id="timeIcon" style="cursor: pointer"></i>
                    <input type="text" class="layui-input" readonly="true" id="time1" placeholder="请选择起止时间">
                </div>
            </div>
        </div>

        <!--  用料数据分析  -->
        <div class="statBox">
            <!--用料数据分析-->
            <div class="statBoxItem active" id="statBoxItem">
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">总缺货告警数（个）</p>
                        <p class="statBoxItemListNum">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/1.png">
                    </div>
                </div>
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">总领料数（个）</p>
                        <p class="statBoxItemListNum">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/2.png">
                    </div>
                </div>
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">总消耗物料数量（个）</p>
                        <p class="statBoxItemListNum">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/3.png">
                    </div>
                </div>
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">总消耗物料金额 （元）</p>
                        <p class="statBoxItemListNum">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/4.png">
                    </div>
                </div>
            </div>
        </div>

        <!-- 报表-->
        <div class="reportMain reportMainAll">
            <div class="reportBox share1">
                <div class="reportItem" id="pickingTime">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">领料时间对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>

                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
            </div>
            <div class="reportBox reportBoxS share3">
                <div class="reportItem" id="equipmentPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">设备领料对比图（TOP10）</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="personnelPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">人员领料对比图（TOP10)</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="workOrderPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">工单领料对比图（TOP10)</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox1">
                                <!-- <div class="listItem1">
                                     <div class="listItem1Name">工单编号01</div>
                                     <div class="listItem1ProgressBox">
                                         <div class="listItem1ProgressBar" style="width: 80%" val="80"></div>
                                     </div>
                                     <div class="listItem1Ratio">80%</div>
                                 </div>-->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="reportItem" id="shopFloorPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">车间领料对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="vendorItemConsumption">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">供应商物料消耗对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="productPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">领新规格排序</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox2">
                                <!--<div class="listItem2">
                                    <div class="listItem2Top">
                                        <div class="listItem2Name">物料名称</div>
                                        <div class="listItem2Code">TNMG160404-MA VP15TF GHY73</div>
                                    </div>
                                    <div class="listItem2Bottom">
                                        <div class="listItem2ProgressBox">
                                            <div class="listItem2ProgressBar" style="width: 80%"></div>
                                        </div>
                                        <div class="listItem2Val">4000000</div>
                                        <div class="listItem2Ratio">80%</div>
                                    </div>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="reportItem" id="pickingBrand">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">领料品牌对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="materialConsumptionSmartCabinet">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">物料消耗智能柜对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="pickingItemClassification">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">领料物料分类对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>

                <div class="reportItem" id="abnormalEnrollment">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">异常登记人员对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="listBox3Header">
                        <div class="listBox3HeaderAvatar">头像</div>
                        <div class="listBox3HeaderName">姓名</div>
                        <div class="listBox3HeaderAbnormal">异常记录数</div>
                        <div class="listBox3HeaderRatio">百分比</div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox3">
                                <!--<div class="listItem3">
                                    <div class="listBox3Avatar">
                                        <img src="assets/images/head.png">
                                    </div>
                                    <div class="listBox3Name">姓名</div>
                                    <div class="listBox3Abnormal">异常记录数</div>
                                    <div class="listBox3Ratio">百分比</div>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reportItem" id="theCauseOfTheException">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">异常原因占比分析</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon3.png">
                            <p>异常记录数量：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>异常总金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="sluggishMaterial">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">呆滞物料占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>呆滞物料数量：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>呆滞物料总金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts">
                            <h3 style="text-align: center; line-height: 100px;">开发中~~~</h3>
                        </div>
                    </div>
                </div>

                <!--<div class="reportItem" id="newCabinetMaterials">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">领新柜物料占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>领新柜物料数量：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>领新柜物料金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox4">
                                &lt;!&ndash;<div class="listItem4">
                                    <div class="listItem4Name">SKU001</div>
                                    <div class="listItem4ProgressBox">
                                        <div class="listItem4ProgressBar" style="width: 80%" val="80"></div>
                                    </div>
                                    <div class="listItem4Ratio">80%</div>
                                </div>&ndash;&gt;
                            </div>
                        </div>
                    </div>
                </div>-->
                <div class="reportItem" id="theItemIsNotReturned">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">未归还物料占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>未归还物料数量：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>未归还物料金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="stageTheItem">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">暂存物料占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>暂存物料数量：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>暂存物料金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>

                <!--<div class="reportItem" id="purchaseItemSpecifications">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">采购物料规格型号占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>采购物料总规格数：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>采购物料总金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="purchaseTheItemVendor">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">采购物料供应商占比分析</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">（单位：支）</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>-->
                <div class="reportItem" id="stagingItemBranding">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">暂存品牌占比分析</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>

                <div class="reportItem" id="materialBillModel">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">报废物料规格型号占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>报废物料规格数：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>报废物料规格总金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox6">
                                <!--<div class="listItem6">
                                    <div class="listItem6Top">
                                        <div class="listItem6Name">工单编号01</div>
                                        <div class="listItem6code">物料编号</div>
                                    </div>
                                    <div class="listItem6Bottom">
                                        <div class="listItem6ProgressBox">
                                            <div class="listItem6ProgressBar" style="width: 80%" val="80"></div>
                                        </div>
                                        <div class="listItem6Ratio">80%</div>
                                    </div>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reportItem" id="specificationsOfMaterialsForRepair">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">报修物料规格型号占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>报修物料总规格数：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>报修物料总金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="reportLostItems">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">报失物料规格型号占比</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>报失物料总规格数：<span>0</span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>报失物料总金额：¥<span>0</span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="listBox5">
                            <!--<div class="listItem5">
                                <div class="listItem5Top">
                                    <div class="listItem5Name">SKU001</div>
                                    <div class="listItem5Code">TNMG160404-MA VP15TF GHY73</div>
                                </div>
                                <div class="listItem5ProgressBox">
                                    <div class="listItem5ProgressBar" style="width: 80%" val="80" ratio="20%"></div>
                                </div>
                            </div>-->
                        </div>
                    </div>
                </div>

                <div class="reportItem" id="costCenter">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">成本中心</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemTips colorGrey">
                        <div class="reportItemTips1">
                            <img src="assets/images/workshopReportImg/icon2.png">
                            <p>成本中心用料数：<span></span>个</p>
                        </div>
                        <div class="reportItemTips2">
                            <img src="assets/images/workshopReportImg/icon1.png">
                            <p>成本中心总金额：¥<span></span></p>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<!--allDataChart -->
<!--数据图表弹窗-->
<script type="text/html" id="allDataChart">
    <form lay-filter="allDataChartForm" class="layui-form model-form"
          style="padding: 10px 15px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 45px); overflow-y: scroll">
            <div class="layui-row table-bor" style="height: calc(100% - 10px);" id="allDataChartFormchartDom"></div>
            <div style="display: none" id="allDataChartTableBox">
                <table class="layui-table" id="allDataChartTable" lay-filter="allDataChartTable"
                       style="display: none"></table>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" id="allDataChartFormExport">导出数据</button>
        </div>
    </form>
</script>

<!--materialDataPop -->
<!--数据图表弹窗-->
<script type="text/html" id="materialDataPop">
    <form lay-filter="materialDataForm" class="layui-form model-form"
          style="padding: 0 15px 10px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 45px); overflow-y: scroll">
            <div>
                <table class="layui-table" id="materialDataTable" lay-filter="materialDataTable"></table>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" id="materialDataFormExport">导出数据</button>
        </div>
    </form>
</script>

<!--公告详情-->
<script type="text/html" id="noticeDetails">
    <form lay-filter="noticeDetailsForm" class="layui-form model-form"
          style="padding: 10px 15px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box noticeDetailsBox" style="height: calc(100% - 60px); overflow-y: scroll">
            <h1 class="layui-elip noticeDetailsTitle" id="noticeDetailsTitle"></h1>
            <div class="noticeDetailsContent" id="noticeDetailsContent"></div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!--公告模板-->
<script id="noticeTemplate" type="text/html">
    {{#
    var fn = function(dateString){
    const date = new Date(dateString);
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return month+"/"+day;
    };
    }}

    {{# layui.each(d, function(index, item){ }}
    <li class="noticeBoxItem" data="{{= JSON.stringify(item) }}">
        <div class="noticeBoxDrop"></div>
        <div class="layui-elip noticeBoxContent">{{ item.title }}</div>
        <div class="noticeBoxTime">{{ fn(item.createTime) }}</div>
    </li>
    {{# }); }}
    {{# if(d.length === 0){ }}
    无数据
    {{# } }}


</script>

<!-- js部分 -->
<script src="/admin/assets/libs/echarts/echarts.min.js"></script>
<script src="/admin/assets/libs/echarts/echartsTheme.js"></script>

<script>
    layui.use(['layer', 'element', 'config', 'admin', 'form', 'table', 'laydate'], function () {
        let $ = layui.jquery;
        let {layer, element, config, table, admin, form, laydate, laytpl, upload} = layui;

        let pickingTrendsObj = {
                param: 'qua', //qua 数量 money 金额
                mainCabCode: ''
            },
            pickingTrendsData = [],
            headerObj = {/*全部图表的(时间、主柜)参数*/
                type: 2,
                endTime: '',
                startTime: '',
                mainCabCode: '',
            },
            configData = {
                "pickingTime": {
                    name: '领料时间对比图',
                    id: 'pickingTime',
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                    },
                    style: 2,// 显示模板
                    url: 'enterprisecab/bill/admin/workshopReport/findMaterialTimeComparison',//请求地址
                    data: []//数据
                },
                "equipmentPicking": {
                    name: '设备领料对比图（TOP10）',
                    id: 'equipmentPicking',
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                    },
                    style: 1,
                    url: 'enterprisecab/bill/admin/workshopReport/findEquipmentMaterialComparison',
                    data: []
                },
                "personnelPicking": {
                    name: '人员领料对比图（TOP10）',
                    id: 'personnelPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 3,
                    url: 'enterprisecab/bill/admin/workshopReport/findPersonnelMaterialComparison',
                    data: []
                },
                "workOrderPicking": {
                    name: '工单领料对比图（TOP10）',
                    id: 'workOrderPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 4,
                    url: 'enterprisecab/bill/admin/workshopReport/findWorkOrderMaterialComparison',
                    data: []
                },
                "shopFloorPicking": {
                    name: '车间领料对比图',
                    id: 'shopFloorPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 6,
                    url: 'enterprisecab/bill/admin/workshopReport/findWorkshopMaterialComparison',
                    data: []
                },
                "vendorItemConsumption": {
                    name: '供应商物料消耗对比图',
                    id: 'vendorItemConsumption',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 7,
                    url: 'enterprisecab/bill/admin/workshopReport/findSupplierMaterialComparison',
                    data: []
                },
                "productPicking": {
                    name: '领新规格排序',
                    id: 'productPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 5,
                    url: 'enterprisecab/bill/admin/workshopReport/findProductMaterialComparison',
                    data: []
                },
                "pickingBrand": {
                    name: '领料品牌对比图',
                    id: 'pickingBrand',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 8,
                    url: 'enterprisecab/bill/admin/workshopReport/findBrandMaterialComparison',
                    data: []
                },
                "materialConsumptionSmartCabinet": {
                    name: '物料消耗智能柜对比图',
                    id: 'materialConsumptionSmartCabinet',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 9,
                    url: 'enterprisecab/bill/admin/workshopReport/findCabinetMaterialComparison',
                    data: []
                },
                "pickingItemClassification": {
                    name: '领料物料分类对比图',
                    id: 'pickingItemClassification',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 10,
                    url: 'enterprisecab/bill/admin/workshopReport/findCategoryMaterialComparison',
                    data: []
                },
                "abnormalEnrollment": {
                    name: '异常登记人员对比图',
                    id: 'abnormalEnrollment',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 11,
                    url: 'enterprisecab/bill/admin/workshopReport/findAbnormalRegistrationComparison',
                    data: []
                },
                "theCauseOfTheException": {
                    name: '异常原因占比分析',
                    id: 'theCauseOfTheException',
                    url: 'enterprisecab/bill/admin/workshopReport/findAbnormalCauseAnalysis',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 12,
                    data: []
                },
                "sluggishMaterial": {
                    name: '呆滞物料占比',
                    id: 'sluggishMaterial',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 13,
                    url: '',
                    data: []
                },
                /*'newCabinetMaterials': {
                    name: '领新柜物料占比',
                    id: 'newCabinetMaterials',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 14,
                    url: 'enterprisecab/bill/admin/workshopReport/findGetNewMaterialComparison',
                    data: []
                },*/
                'theItemIsNotReturned': {
                    name: '未归还物料占比',
                    id: 'theItemIsNotReturned',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 15,
                    url: 'enterprisecab/bill/admin/workshopReport/findReturnedMaterialComparison',
                    data: []
                },
                'stageTheItem': {
                    name: '暂存物料占比',
                    id: 'stageTheItem',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 16,
                    url: 'enterprisecab/bill/admin/workshopReport/findTSMaterialComparison',
                    data: []
                },
                /*'purchaseItemSpecifications': {
                    name: '采购物料规格型号占比',
                    id: 'purchaseItemSpecifications',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 13,
                    url: 'enterprisecab/bill/admin/workshopReport/findPurchaseMaterialModelComparison',
                    data: []
                },
                'purchaseTheItemVendor': {
                    name: '采购物料供应商占比分析',
                    id: 'purchaseTheItemVendor',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 20,
                    url: 'enterprisecab/bill/admin/workshopReport/findPurchaseMaterialSupplierComparison',
                    data: []
                },*/
                'stagingItemBranding': {
                    name: '暂存品牌占比分析',
                    id: 'stagingItemBranding',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 17,
                    url: 'enterprisecab/bill/admin/workshopReport/findTSMaterialBrandComparison',
                    data: []
                },
                'materialBillModel': {
                    name: '报废物料规格型号占比',
                    id: 'materialBillModel',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 22,
                    url: 'enterprisecab/bill/admin/workshopReport/findCheckedResultMaterialModelComparison',
                    data: []
                },
                'specificationsOfMaterialsForRepair': {
                    name: '报修物料规格型号占比',
                    id: 'specificationsOfMaterialsForRepair',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 19,
                    url: 'enterprisecab/bill/admin/workshopReport/findRepairsMaterialModelComparison',
                    data: []
                },
                'reportLostItems': {
                    name: '报失物料规格型号占比',
                    id: 'reportLostItems',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 21,
                    url: 'enterprisecab/bill/admin/workshopReport/findMissMaterialModelComparison',
                    data: []
                },
                'costCenter': {
                    name: '成本中心',
                    id: 'costCenter',
                    parameter: {param: 'qua', code: config.getUser().enterpriseCode}, // 按数量 按金额
                    style: 23,
                    url: 'enterprisecab/bill/admin/workshopReport/findMissMaterialCostCenter',
                    data: []
                },

            };
        form.render('select');


        let headerIsShow = $('.layui-body-header').hasClass('show'),
            eleHeight = $('#pickingTrends').outerHeight() - $('#pickingTrends').offset().top;
        $("#reportBodyBox").scroll(function () {
            if ($('#pickingTrends').offset().top <= -(eleHeight)) {
                $('#headerBox').css({
                    position: 'fixed',
                    top: headerIsShow ? '100px' : '75px',
                    width: $('#headerBox').parent().width() + "px"
                });
                $('.statBox').css({marginTop: (headerIsShow ? "50px" : "30px")});

            } else {
                $('#headerBox').css({'position': 'relative', top: '0'});
                $('.statBox').css({marginTop: "0"});
            }
        });


        init();

        // 入口方法
        function init() {
            // 领料趋势变化图
            getPickingTrendsEcharts(pickingTrendsObj);

            // 用料数据分析
            getMaterialDataAnalysis();

            // 请求所有报表数据
            getReportData(configData);

            //获取公告数据
            getNoticeData();

        }

        //获取公告数据
        function getNoticeData() {
            admin.showLoading('.noticeBox', 1);
            admin.req('enterprisecab/bill/admin/workshopReport/getUpgradeReport', {}, res => {
                admin.removeLoading('.noticeBox', false, false);
                if (res.code === 200) {
                    showNotice(res.data);
                } else {
                    showNotice([]);
                }
            })
        }

        //渲染公告界面
        function showNotice(_data) {
            let noticeTpl = noticeTemplate.innerHTML, noticeView = document.getElementById('noticeBoxList');
            laytpl(noticeTpl).render(_data, function (html) {
                noticeView.innerHTML = html;
            });
        }

        //公告点击事件
        $('#noticeBoxList').delegate('.noticeBoxItem', 'click', function () {
            let data = JSON.parse($(this).attr('data'));
            admin.open({
                type: 1,
                area: ['1180px', '700px'],
                offset: '65px',
                title: '公告详情',
                content: $('#noticeDetails').html(),
                success: function () {
                    $('#noticeDetailsTitle').text(data.title);
                    $('#noticeDetailsContent').html(data.detail);
                    $("#noticeDetailsContent").delegate("img", "click", function () {
                        admin.previewImg(this)
                    });
                }
            });
        });


        //请求主柜下拉数据
        admin.reqSync('enterprisecab/cabinet/admin/cabinet/getCabinetByCabinetNature?limit=9999', {}, res => {
            if (res.code === 200) {
                loadReportSelectHtml(res.data, "全部", 'mainCabCode', 2, 'pickingTrends');
                loadReportSelectHtml(res.data, "全部", 'mainCabCode', 2, 'headerBox')
            }
        }, 'get');

        // 领料趋势变化图 主柜选项
        form.on('select(mainCabCode)', function (data) {
            pickingTrendsObj.mainCabCode = data.value;
            getPickingTrendsEcharts(pickingTrendsObj);
        });

        // 用料数据分析 所有报表  主柜选项
        form.on('select(mainCabCodeAll)', function (data) {
            headerObj.mainCabCode = data.value;
            getReportData(configData);
            getMaterialDataAnalysis()
        });


        function getPickingTrendsEcharts(_obj) {
            admin.req('enterprisecab/bill/admin/workshopReport/findMaterialRequisitionTrend', _obj,
                res => {
                    if (res.code === 200) {
                        pickingTrendsData = res.data;
                        pickingTrendsEcharts(pickingTrendsData, document.getElementById('pickingTrends'));
                    }
                })
        }

        // 请求用料数据分析数据
        function getMaterialDataAnalysis(_val) {
            admin.req('enterprisecab/bill/admin/workshopReport/list', Object.assign({}, headerObj, {click: _val || 0}),
                res => {
                    if (res.code === 200) {
                        showMaterialDataAnalysis(res.data)
                    } else {
                        showMaterialDataAnalysis([])
                    }
                }
            )
        }

        // 渲染用料数据分析
        function showMaterialDataAnalysis(_data) {
            if (!_data || _data.length === 0) {
                return false
            }
            _data.forEach((item, index) => {
                $('#statBoxItem>.statBoxItemList').eq(index).find('.statBoxItemListNum').text(item.value);
                $('#statBoxItem>.statBoxItemList').eq(index).find('.statBoxItemListName').text(item.title);
                $('#statBoxItem>.statBoxItemList').eq(index).attr('sign', item.sign);
            })
        }

        // 用料数据分析点击事件
        $('#statBoxItem .statBoxItemList').click(function () {
            let that = $(this);
            if (that.attr('sign') == 1) {
                window.location.href = window.location.origin + window.location.pathname + '#/cabinet/cellInventoryAlarm';
                return false;
            }
            admin.open({
                type: 1,
                area: ['1280px', '750px'],
                offset: '65px',
                title: that.find('.statBoxItemListName').text(),
                content: $('#materialDataPop').html(),
                success: function () {
                    let colsData = [
                        {type: 'numbers', 'title': '序号'}
                        , {field: 'name', sort: true, title: '物料名称'}
                        , {field: 'cabCode', sort: true, title: '柜子编号'}
                        , {field: 'spaceCode', sort: true, title: '货道编码'}
                        , {field: 'quantity', sort: true, title: '数量'}
                        , {field: 'creatorName', sort: true, title: '创建人'}
                        , {field: 'time', sort: true, title: '时间'}
                    ], materialDataData = [];

                    if (that.attr('sign') == 1) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'skuName', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编号'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'productTypeName', sort: true, title: '物料类型'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'spaceCode', sort: true, title: '货道编号'}
                            // , {field: '', sort: true, title: '库存容量'}
                            // , {field: '', sort: true, title: '当前库存'}
                            // , {field: '', sort: true, title: '建议补货数'}

                        ];
                    } else if (that.attr('sign') == 2) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'name', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编号'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'quantity', sort: true, title: '包装数', templet: d => d.quantity + '盒'}
                            , {field: 'baseQuantity', sort: true, title: '基础单位数', templet: d => d.baseQuantity + '支'}
                            // , {field: 'spaceCode', sort: true, title: '货道/库位数', templet: d => d.spaceCode + '个'}
                            , {
                                field: 'deviceCode',
                                sort: true,
                                title: '设备编码',
                                templet: d => d.deviceCode ? d.deviceCode : '未选设备'
                            }
                            , {field: 'creatorName', sort: true, title: '创建人'}
                            , {field: 'time', sort: true, title: '时间'}
                        ];
                    } else if (that.attr('sign') == 3) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'code', sort: true, title: '领取记录编号', width: 120}
                            , {field: 'name', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编码'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'departmentName', sort: false, title: '部门'}
                            , {field: 'costCenter', sort: false, title: '成本中心'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'spaceCode', sort: true, title: '货道编号'}
                            , {field: 'baseQuantity', sort: true, title: '基础单位数', templet: d => d.baseQuantity + '支'}
                            , {field: 'total', sort: true, title: '金额'}
                            , {
                                field: 'deviceCode',
                                sort: true,
                                title: '设备编码',
                                templet: d => d.deviceCode ? d.deviceCode : '未选设备'
                            }
                            , {field: 'creatorName', sort: true, title: '领用人'}
                            , {field: 'time', sort: true, title: '领用时间'}
                        ];
                    } else if (that.attr('sign') == 4) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'code', sort: true, title: '领取记录编号', width: 120}
                            , {field: 'name', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编码'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'departmentName', sort: false, title: '部门'}
                            , {field: 'costCenter', sort: false, title: '成本中心'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'spaceCode', sort: true, title: '货道编码'}
                            , {field: 'baseQuantity', sort: true, title: '基础单位数', templet: d => d.baseQuantity + '支'}
                            , {field: 'total', sort: true, title: '金额'}
                            , {
                                field: 'deviceCode',
                                sort: true,
                                title: '设备编码',
                                templet: d => d.deviceCode ? d.deviceCode : '未选设备'
                            }
                            , {field: 'creatorName', sort: true, title: '领用人'}
                            , {field: 'time', sort: true, title: '领用时间'}
                            // , {field: 'total', sort: true, title: '总计'}
                        ];
                    }

                    admin.reqSync('enterprisecab/bill/admin/workshopReport/list', Object.assign({}, headerObj, {click: that.index() + 1}), res => {
                        if (res.code === 200) {
                            materialDataData = res.data;
                        }
                    });

                    let materialDataTb = table.render({
                        elem: '#materialDataTable',
                        // url: config.base + 'enterprisecab/bill/admin/workshopReport/list',
                        // where: Object.assign({}, headerObj, {click: that.attr('sign')}),
                        data: materialDataData,
                        title: that.find('.statBoxItemListName').text(),
                        cellMinWidth: 100,
                        // height: 550,
                        page: true,
                        cols: [colsData],
                    });

                    table.resize("materialDataTable");

                    $('#materialDataFormExport').click(function () {
                        // table.exportFile(materialDataTb.config.id, layui.table.cache["materialDataTable"], 'xls');
                        table.exportFile(materialDataTb.config.id, materialDataData, 'xls');
                    })
                }
            });
        });


        // 请求所有报表数据;
        function getReportData(_data) {
            for (let item in _data) {
                if (configData[item].url) {
                    admin.req(configData[item].url, Object.assign({}, headerObj, configData[item].parameter), res => {
                        if (res.code === 200) {
                            configData[item].data = res.data;
                            showReport(configData[item])
                        }
                    })
                }
            }
        }

        function showReport(_data) {
            if (_data.style === 1) {
                showReportTemplate1(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 2) {
                showReportTemplate2(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 3) {
                showReportTemplate3(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 4) {
                showReportTemplate4(_data, document.getElementById(_data.id).querySelector('.listBox1'))
            } else if (_data.style === 5) {
                showReportTemplate5(_data, document.getElementById(_data.id).querySelector('.listBox2'))
            } else if (_data.style === 6) {
                showReportTemplate6(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 7) {
                showReportTemplate7(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 8) {
                showReportTemplate8(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 9) {
                showReportTemplate9(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 10) {
                showReportTemplate10(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 11) {
                showReportTemplate11(_data, document.getElementById(_data.id).querySelector('.listBox3'))
            } else if (_data.style === 12) {
                showReportTemplate12(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 13) {
                showReportTemplate13(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 14) {
                showReportTemplate14(_data, document.getElementById(_data.id).querySelector('.listBox4'))
            } else if (_data.style === 15) {
                showReportTemplate15(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 16) {
                showReportTemplate16(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 17) {
                showReportTemplate17(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 18) {
                showReportTemplate18(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 19) {
                showReportTemplate19(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 20) {
                showReportTemplate20(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 21) {
                showReportTemplate21(_data, document.getElementById(_data.id).querySelector('.listBox5'))
            } else if (_data.style === 22) {
                showReportTemplate22(_data, document.getElementById(_data.id).querySelector('.listBox6'))
            } else if (_data.style === 23) {
                showReportTemplate23(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            }
        }


        // 时间选择
        form.on('select(timeType)', function (data) {
            headerObj.type = data.value;
            headerObj.startTime = '';
            headerObj.endTime = '';
            $('#time1').val('');
            getReportData(configData);
            getMaterialDataAnalysis()
        });

        let time1 = laydate.render({
            elem: '#time1',
            eventElem: '#timeIcon',
            trigger: 'click',
            type: 'date',
            range: "至",
            done: function (value, date, endDate) {
                if (value) {
                    let timeArray = value.split("至");
                    $('select[lay-filter="timeType"]').val('');
                    headerObj.type = '';
                    headerObj.startTime = timeArray[0].trim() + " 00:00:00";
                    headerObj.endTime = timeArray[1].trim() + " 23:59:59";
                } else {
                    $('select[lay-filter="timeType"]').val(2);
                    headerObj.type = 2;
                    headerObj.startTime = '';
                    headerObj.endTime = '';
                }
                form.render('select');
                getReportData(configData);
                getMaterialDataAnalysis();
            }
        });


        // 显示领料趋势变化图头部切换
        $('#pickingTrends .reportItemHeaderSwitch>div').click(function () {
            if (!$(this).hasClass('active')) {
                //qua 数量  money金额
                $(this).index() === 0 ? pickingTrendsObj.param = 'qua' : pickingTrendsObj.param = 'money';
                $(this).addClass('active').siblings().removeClass('active');
                getPickingTrendsEcharts(pickingTrendsObj);
            }
        });

        // 显示领料趋势变化图
        function pickingTrendsEcharts(_data, _ele) {
            let _elem = _ele.querySelector('.reportItemEcharts');
            $(_ele).find('.reportItemHeaderTitle').text(_data.title);
            $(_ele).find('.reportItemUnit').text("（单位：" + _data.unit + "）");
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let xAxisData = [], option, xAxisData1 = [];
            let initData = _data.data, data = [];
            initData.forEach(item => {
                item.name = item.createTime;
                xAxisData.push(item.name);
                if (item.value1 && pickingTrendsObj.param == 'qua') {
                    xAxisData1.push(item.value1)
                }
            });
            data = initData.slice(-32);
            xAxisData = xAxisData.slice(-32);
            xAxisData1 = xAxisData1.slice(-32);
            option = {
                tooltip: {
                    trigger: "axis",
                    borderRadius: '5',
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.8)',
                    color: '#333333',
                    formatter: function (parms) {
                        let htmlStr = '', str = '', ratioHtml = '';
                        parms.forEach(item => {
                            if (item.data.ratio) {
                                ratioHtml += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">占比</div><div style="color: ${item.color}">${item.data.ratio}</div>
                                       </div>`
                            }
                            htmlStr += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">${item.marker}${item.seriesName}</div>
                                           <div style="color: ${item.color}">${item.value}</div>
                                       </div>`
                        });
                        str = "<div style='border-radius:5px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                            "<div style='font-size: 14px;font-weight: 400;color: #666'>" + parms[0].name + "</div>" + htmlStr + ratioHtml + "</div>";
                        return str;
                    }
                },
                legend: [
                    {
                        data: ['数量(包装计)', '数量(基础单位计)'],
                        icon: 'line',
                        right: '5%',
                        itemWidth: 20,
                        itemHeight: 20,
                        textStyle: {
                            fontSize: 16
                        }
                    },

                ],
                grid: {
                    top: '40',//上边距
                    right: '65',//右边距
                    left: '10',//左边距
                    bottom: '10%',//下边距
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        margin: 20,
                        // rotate: -30,//旋转
                        formatter: (v) => v.slice(0, 10)
                    },
                    axisTick: {
                        show: false //隐藏X轴刻度
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#000"
                        }
                    },
                },
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        color: 'rgba(0,0,0,0.65)',

                        textStyle: {
                            fontSize: 14
                        },
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(223, 223, 223, 1)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(223, 223, 223, 1)',
                            type: "dashed",
                        }
                    }
                }],
                series: [
                    {
                        type: 'line',
                        data: data,
                        name: '数量(基础单位计)',
                        symbolSize: 10, //标记的大小
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (parms) {
                                return parms.value > 0 ? parms.value : ''
                            }
                        },
                        lineStyle: {
                            color: "#009C5E",
                            width: 4,
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#009C5E",
                            borderWidth: 5,
                        },
                        smooth: 0.4,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 156, 94,0.1)'
                                },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 156, 94,0)'
                                    }
                                ], false),
                                shadowColor: 'rgba(0, 156, 94, 0.9)',
                                shadowBlur: 20
                            }
                        },
                        markLine: {
                            data: [{
                                type: 'average',
                                name: '平均值'
                            }],
                            label: {
                                normal: {
                                    formatter: '平均值:\n {c}'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: '#FFB94D'
                                }
                            },
                        },
                    },
                    {
                        type: 'line',
                        data: xAxisData1,
                        symbolSize: 10, //标记的大小
                        name: '数量(包装计)',
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (parms) {
                                return parms.value > 0 ? parms.value : ''
                            }
                        },
                        lineStyle: {
                            color: "#00BFFF",
                            width: 4,
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#00BFFF",
                            borderWidth: 5,
                        },
                        smooth: 0.4,
                    },
                ],
                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [0],
                    bottom: 0,
                    start: 100 - (10 / data.length) * 100,
                    end: 100,
                    handleSize: '110%',
                    handleStyle: {color: "#009C5E"},
                    textStyle: {color: "#000"},
                    fillerColor: "rgb(0,181,89,0.3)",
                    borderColor: "rgb(0,181,89,0.3)",

                }],
            };
            option && myChart.setOption(option, true);
        }


        $('.reportMainAll .reportItemHeaderSwitch>div').click(function () {

            if (!$(this).hasClass('active')) {
                let obj = {};
                //qua 数量  money金额
                configData[$(this).parents('.reportItem').attr('id')].parameter.param = $(this).index() === 0 ? 'qua' : 'money';

                obj[$(this).parents('.reportItem').attr('id')] = configData[$(this).parents('.reportItem').attr('id')];

                getReportData(obj);

                $(this).addClass('active').siblings().removeClass('active');
            }
        });

        //模板1
        function showReportTemplate1(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let yAxisData = [], seriesData = [], option = {};
            let data = [..._data.data.data].reverse().slice(0, 10);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                yAxisData.push(item.name);
                seriesData.push(item);
            });
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            option = {
                tooltip: {
                    trigger: "axis",
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #000;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms[0].data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms[0].data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms[0].data.name + "</div></div>";
                        return str;
                    }
                },
                grid: {
                    left: '0',
                    right: '14%',
                    bottom: '0',
                    top: '0',
                    containLabel: true
                },
                xAxis: [{
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    type: 'value',
                    show: true,
                    axisTick: {show: false},
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#333',
                        }
                    },

                }],
                yAxis: [{
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: yAxisData,
                    axisLabel: {
                        formatter: (v) => v.slice(0, 10)
                    }
                }],
                series: [{
                    type: 'bar',
                    color: '#72B65F',
                    barWidth: 16, // 柱子宽度
                    label: {
                        show: true,
                        position: 'right', // 位置
                        color: '#333333',
                        fontSize: 12,
                        fontWeight: '400', // 加粗
                        distance: 5, // 距离
                        rich: {
                            val: {
                                color: '#333333',
                            },
                            ratio: {
                                color: '#009C5E'
                            }
                        },
                        formatter: function (param) {
                            return '{val|' + param.data.value + ' }{ratio|' + isNullObj(param.data.ratio) + '}';
                        },
                    }, // 柱子上方的数值
                    data: seriesData,
                },]
            };

            option && myChart.setOption(option, true);
        }

        //模板2
        function showReportTemplate2(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let xAxisData = [], seriesData = [], option;
            let data = _data.data.data.reverse().slice(-20);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                xAxisData.push(item.name);
                seriesData.push(item);
            });

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            option = {
                color: ['#2CBB79'],
                tooltip: {
                    trigger: "axis",
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms[0].data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms[0].data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms[0].data.name + "</div></div>";
                        return str;
                    }
                },
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '30',
                    top: '20',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        color: '#333333',
                        // rotate: 10,  //旋转
                        textStyle: {
                            fontSize: 12
                        },
                        formatter: (v) => v.slice(0, 10)
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(107,107,107,0.37)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#333333',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(107,107,107,0.37)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                },
                dataZoom: [{
                    show: true,
                    height: 20,
                    xAxisIndex: [0],
                    bottom: 0,
                    "start": 40,
                    "end": 100,
                    handleSize: '110%',
                    handleStyle: {color: "#009C5E"},
                    textStyle: {color: "#000"},
                    fillerColor: "rgb(0,181,89,0.3)",
                    borderColor: "rgb(0,181,89,0.3)",

                }],
                series: [
                    {
                        data: seriesData,
                        type: 'bar',
                        barWidth: '20px',
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 12,
                                fontWeight: '400',
                                color: '#333',
                                position: 'top',
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板3
        function showReportTemplate3(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option;
            let data = _data.data.data.slice(0, 5);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }
            option = {
                color: colorList,
                title: {
                    text: priceUnit(_data.data.sum ? _data.data.sum.value : 0),
                    subtext: _data.parameter.param === 'money' ? '领料总金额' : '领料总数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '28.5%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                legend: {
                    icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                    show: true,
                    orient: 'vertical',
                    top: "middle",
                    right: "0%",
                    formatter: function (params) {
                        let value = "", ratio = "", colorStr = '';
                        data.forEach((item, index) => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                                colorStr = colorList[index];
                            }

                        });
                        return [`{name|${params.slice(0, 8)}}{line| ---}{value|${value}}  {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        color: '#000',
                        fontSize: 14,
                        itemGap: 15,
                        rich: {
                            line: {
                                color: '#CCCCCC'
                            },
                            name: {
                                width: 60,
                                overflow: 'hidden',
                                fontSize: 12,
                                lineHeight: 20,
                                color: '#000',
                            },
                            value: {
                                width: 40,
                                fontSize: 12,
                                overflow: 'hidden',
                                lineHeight: 18,
                                color: '#333',

                            },
                            ratio: {
                                fontSize: 12,
                                overflow: 'hidden',
                                lineHeight: 18,
                                color: '#009C5E',
                                width: 45,
                            }
                        }

                    },
                },
                series: [
                    // 主要展示层的
                    {
                        radius: ['32%', '60%'],
                        center: ['30%', '50%'],
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },
                    // 边框的设置
                    {
                        color: 'rgba(250,250,250,0.5)',
                        radius: ['66%', '70%'],
                        center: ['30%', '50%'],
                        label: {show: false},
                        type: 'pie',
                        data: [{value: 1}],
                        tooltip: {
                            show: false
                        }
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板4
        function showReportTemplate4(_data, _elem) {
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }
            let html = "";
            if (!_data.data.data || _data.data.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _data.data.data.slice(0, 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value;
                    }
                    item.name = item.name ? item.name : '未知工单';
                    html += `<div class="listItem1">
                                <div class="listItem1Name" title="${item.name}">${item.name}</div>
                                <div class="listItem1ProgressBox">
                                    <div class="listItem1ProgressBar" style="width: ${(item.value / refer) * 100}%" val="${priceUnit(item.value)}"></div>
                                </div>
                                <div class="listItem1Ratio">${isNullObj(item.ratio)}</div>
                            </div>`
                })
            }
            $(_elem).html(html);
        }

        //模板5
        function showReportTemplate5(_data, _elem) {
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }
            let html = "";
            if (!_data.data.data || _data.data.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _data.data.data.slice(0, 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value;
                    }
                    html += `<div class="listItem2">
                                <div class="listItem2Top">
                                    <div class="listItem2Name" title="${item.name}">${item.name}</div>
                                    <div class="listItem2Code" title="${item.oldSpecCode}">${item.oldSpecCode}</div>
                                </div>
                                <div class="listItem2Bottom">
                                    <div class="listItem2ProgressBox">
                                        <div class="listItem2ProgressBar" style="width: ${(item.value / refer) * 100}%"></div>
                                    </div>
                                    <div class="listItem2Val" title="${item.value}">${item.value}</div>
                                    <div class="listItem2Ratio">${isNullObj(item.ratio)}</div>
                                </div>
                            </div>`
                })
            }
            $(_elem).html(html);
        }

        //模板6
        function showReportTemplate6(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option;
            let data = _data.data.data.slice(0, 8);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            option = {
                color: colorList,
                title: {
                    text: priceUnit(_data.data.sum ? _data.data.sum.value : 0),
                    subtext: _data.parameter.param === 'money' ? '领料总金额' : '领料总数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '28.5%',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: {
                    orient: 'vertical',
                    right: '2%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 4,
                    itemHeight: 30,
                    itemStyle: {
                        borderRadius: '30',
                    },
                    textStyle: {
                        color: "#333"
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        let value = "", ratio = "";
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                            }

                        });
                        return [`{name|${params}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#000',
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                                fontWeight: '500',
                                width: 80,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#009C5E',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                series: [
                    {
                        radius: ['30%', '60%'],
                        center: ['30%', '50%'],
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },

                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板7
        function showReportTemplate7(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let xAxisData = [], seriesData = [], option;
            let data = _data.data.data.slice(0, 10);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                xAxisData.push(item.name);
                seriesData.push(item);
            });

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            option = {
                color: ['#2CBB79'],
                tooltip: {
                    trigger: "axis",
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms[0].data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms[0].data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms[0].data.name + "</div></div>";
                        return str;
                    }
                },
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '30',
                    top: '20',
                    containLabel: true

                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        color: '#333333',
                        rotate: -20,  //旋转
                        textStyle: {
                            fontSize: 12
                        },
                        formatter: (v) => {
                            let str = v.split("");
                            for (let i = 0; i < str.length; i++) {
                                if (i > 0) {
                                    if (i % 8 === 0) {
                                        str.splice(i, 0, '\n');
                                    }
                                }
                            }
                            return str.join("")
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(107,107,107,0.37)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#333333',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(107,107,107,0.37)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                        }
                    }
                },
                series: [
                    {
                        data: seriesData,
                        type: 'bar',
                        barWidth: '20px',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 12,
                                fontWeight: '400',
                                color: '#333',
                                position: 'top',
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板8
        function showReportTemplate8(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let xAxisData = [], seriesData = [], option;
            let data = _data.data.data.slice(0, 8);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                xAxisData.push(item.name);
                seriesData.push(item);
            });

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }
            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                title: {
                    text: priceUnit(_data.data.sum ? _data.data.sum.value : 0),
                    subtext: _data.parameter.param === 'money' ? '领料总金额' : '领料总数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '27%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: {
                    orient: 'vertical',
                    right: '2%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 4,
                    itemHeight: 30,
                    itemStyle: {
                        borderRadius: '30',
                    },
                    textStyle: {
                        color: "#333"
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        let value = "", ratio = "";
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                            }

                        });
                        return [`{name|${params}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#000',
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                                fontWeight: '500',
                                width: 80,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#009C5E',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                series: [
                    {
                        type: "pie",
                        center: ['28%', '50%'],
                        radius: ["45%", "60%"],
                        itemStyle: {
                            normal: {
                                borderWidth: 8,
                                borderColor: "#fff"
                            }
                        },
                        label: {
                            show: false
                        },
                        data: seriesData,
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板9
        function showReportTemplate9(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option;
            let data = _data.data.data.slice(0, 8);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: '2%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 4,
                    itemHeight: 30,
                    itemStyle: {
                        borderRadius: '30',
                    },
                    textStyle: {
                        color: "#333"
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        let value = "", ratio = "";
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                            }

                        });
                        return [`{name|${limitLength(params, 18)}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#000',
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                                fontWeight: '500',
                                width: 80,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#009C5E',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                series: [
                    {
                        radius: ['25%', '60%'],
                        center: ['30%', '50%'],
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },

                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板10
        function showReportTemplate10(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option;
            let data = _data.data.data.slice(0, 10);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let code = '', str;
                        /*if (parms.data.oldSpecCode) {
                            code = "<div style='word-wrap:break-word;'>规格：" + parms.data.oldSpecCode + "</div>"
                        } else {
                            code = ""
                        }*/

                        str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" + code +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                title: {
                    text: priceUnit(_data.data.sum ? _data.data.sum.value : 0),
                    subtext: _data.parameter.param === 'money' ? '领料总金额' : '领料总数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '28.5%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: {
                    orient: 'vertical',
                    right: '2%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 4,
                    itemHeight: 44,
                    type: 'scroll',
                    itemStyle: {
                        borderRadius: '30',
                    },
                    textStyle: {
                        color: "#333"
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        let value = "", ratio = "", skuCode = '';
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                                skuCode = item.oldSpecCode
                            }

                        });
                        // return [`{name|${params}}\n{skuCode|${skuCode}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                        return [`{name|${params}}\n\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        rich: {
                            skuCode: {
                                fontSize: 12,
                                lineHeight: 14,
                                color: '#333333',
                                width: 120,
                                overflow: 'hidden',
                            },
                            name: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#000',
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                                fontWeight: '500',
                                width: 80,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#009C5E',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                series: [
                    {
                        radius: ['40%', '60%'],
                        center: ['30%', '50%'],
                        roseType: 'area',
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },

                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板11
        function showReportTemplate11(_data, _elem) {
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }
            $('#' + _data.id + ' .listBox3HeaderAbnormal').text(_data.parameter.param == "qua" ? '异常记录数' : '异常金额');


            let html = "";
            if (!_data.data.data || _data.data.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _data.data.data.slice(0, 10);
                data.forEach((item, index) => {
                    html += `<div class="listItem3">
                                <div class="listBox3Avatar"><img src="${item.inCreatorImg || 'assets/images/head.png'}"></div>
                                <div class="listBox3Name">${item.name || ' '}</div>
                                <div class="listBox3Abnormal">${item.value}</div>
                                <div class="listBox3Ratio">${isNullObj(item.ratio)}</div>
                            </div>`
                })
            }
            $(_elem).html(html);
        }

        //模板12
        function showReportTemplate12(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#FF840033', '#FF840066', "#FF840099", "#FF8400CC", "#FF8400FF"];
            let seriesData = [], option;
            let data = _data.data.data.slice(0, 10);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }

            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>异常原因：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                series: [
                    {
                        type: 'funnel',
                        gap: 10,
                        minSize: 27,
                        maxSize: 300,
                        left: '2%',
                        labelLine: {
                            normal: {
                                show: true,
                                length: 20,
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return [`{name|${params.data.name}}   {val|${params.data.value}}`];
                            },
                            rich: {
                                name: {
                                    fontSize: 12,
                                    color: '#333333'
                                },
                                val: {
                                    fontSize: 12,
                                    color: '#FF8400'
                                }
                            }
                        },
                        data: seriesData,
                    },

                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板13
        function showReportTemplate13(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option, titleText = 0, data = [];
            if (_data.data.data) {
                data = _data.data.data.slice(0, 8);
            } else {
                data = _data.data.slice(0, 8);
            }

            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }

            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }

            if (_data.data.sum) {
                titleText = _data.data.sum.value
            } else if (_data.data.totalSumOne) {
                titleText = _data.data.totalSumOne[0].value
            }
            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                legend: [
                    {
                        icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                        orient: 'vertical',
                        top: '55%',
                        data: seriesData.slice(0, Math.ceil(seriesData.length / 2)),
                        left: 0,
                        itemGap: 10,
                        type: 'scroll',
                        formatter: function (params) {
                            let value = "", ratio = "", code = "";
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                    code = item.oldSpecCode || '';
                                }
                            });
                            return [`{name|${params}}\n{code|${code}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#000',
                                    width: '100%',
                                    overflow: 'hidden',
                                },
                                code: {
                                    fontSize: 12,
                                    lineHeight: 14,
                                    color: '#000',
                                    width: '100%',
                                    overflow: 'hidden',
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 80,
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#009C5E',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 40,
                                },
                                text: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#999',
                                    overflow: 'hidden',
                                    width: 60,
                                }
                            }
                        },
                    },
                    {
                        icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                        orient: 'vertical',
                        top: '55%',
                        data: seriesData.slice(Math.ceil(seriesData.length / 2)),
                        right: '0%',
                        itemGap: 10,
                        type: 'scroll',
                        formatter: function (params) {
                            let value = "", ratio = "", code = '';
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                    code = item.oldSpecCode || '';
                                }
                            });
                            return [`{name|${params}}\n{code|${code}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            width: 200,
                            rich: {
                                name: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#000',
                                    width: '100%',
                                    overflow: 'hidden',
                                },
                                code: {
                                    fontSize: 12,
                                    lineHeight: 14,
                                    color: '#000',
                                    width: '100%',
                                    overflow: 'hidden',
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 80,
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#009C5E',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 40,
                                },
                                text: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#999',
                                    overflow: 'hidden',
                                    width: 60,
                                }
                            }
                        },
                    },
                ],
                title: {
                    text: priceUnit(titleText),
                    subtext: _data.parameter.param === 'money' ? '采购物料金额' : '采购物料数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: '20%',
                    x: '48.5%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                series: [
                    {
                        radius: ['30%', '47%'],
                        center: ['50%', '27%'],
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },

                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板14
        function showReportTemplate14(_data, _elem) {
            let html = "";
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }

            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }

            if (!_data.data.data || _data.data.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _data.data.data.slice(0, 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value;
                    }
                    html += ` <div class="listItem4">
                                 <div class="listItem4Top">
                                    <div class="listItem4Name" title="${item.name}">${item.name}</div>
                                    <div class="listItem4Code" title="${item.oldSpecCode}">${item.oldSpecCode}</div>
                                 </div>
                                 <div class="listItem4Bottom">
                                 <div class="listItem4ProgressBox">
                                        <div class="listItem4ProgressBar" style="width: ${(item.value / refer) * 100}%" val="${item.value}"></div>
                                 </div>
                                 <div class="listItem4Ratio">${isNullObj(item.ratio)}</div>
                                 </div>
                             </div>`
                })
            }
            $(_elem).html(html);
        }

        //模板15
        function showReportTemplate15(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option, testSeries1 = [], testSeries = [];
            let data = _data.data.data.slice(0, 10);

            data.forEach(item => {
                item.label = {show: false};
                item.labelLine = {show: false};
                testSeries1.push(item);
                let custHaveNo = {
                    value: 0,
                    name: "",
                    label: {show: false},
                    labelLine: {show: false},
                    itemStyle: {
                        normal: {
                            color: 'transparent'
                        }
                    }
                };
                testSeries.push(custHaveNo)
            });
            seriesData = [...testSeries1, ...testSeries];

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }

            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }

            option = {
                color: colorList,
                legend: [
                    /*  {
                          icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                          orient: 'vertical',
                          top: '55%',
                          data: testSeries1.slice(0, Math.ceil(testSeries1.length / 2)),
                          left: 0,
                          itemGap: 10,
                          type: 'scroll',
                          formatter: function (params) {
                              let value = "", ratio = "", code = "";
                              testSeries1.forEach(item => {
                                  if (item.name == params) {
                                      value = item.value;
                                      ratio = item.ratio;
                                      code = item.oldSpecCode || '';
                                  }
                              });
                              return [`{name|${params}}\n{code|${code}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                          },
                          textStyle: {
                              width: 200,
                              rich: {
                                  name: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#000',
                                      width: '100%',
                                      overflow: 'hidden',
                                  },
                                  code: {
                                      fontSize: 12,
                                      lineHeight: 14,
                                      color: '#000',
                                      width: '100%',
                                      overflow: 'hidden',
                                  },
                                  value: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#333',
                                      fontWeight: '500',
                                      overflow: 'hidden',
                                      width: 80,
                                  },
                                  ratio: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#009C5E',
                                      fontWeight: '500',
                                      overflow: 'hidden',
                                      width: 80,
                                  },
                                  text: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#999',
                                      overflow: 'hidden',
                                      width: 60,
                                  }
                              }
                          },
                      },
                      {
                          icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                          orient: 'vertical',
                          top: '55%',
                          data: testSeries1.slice(Math.ceil(testSeries1.length / 2)),
                          left: "55%",
                          type: 'scroll',
                          itemGap: 10,
                          formatter: function (params) {
                              let value = "", ratio = "", code = '';
                              testSeries1.forEach(item => {
                                  if (item.name == params) {
                                      value = item.value;
                                      ratio = item.ratio;
                                      code = item.oldSpecCode || '';
                                  }
                              });
                              return [`{name|${params}}\n{code|${code}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                          },
                          textStyle: {
                              width: 200,
                              rich: {
                                  name: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#000',
                                      width: '100%',
                                      overflow: 'hidden',
                                  },
                                  code: {
                                      fontSize: 12,
                                      lineHeight: 14,
                                      color: '#000',
                                      width: '100%',
                                      overflow: 'hidden',
                                  },
                                  value: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#333',
                                      fontWeight: '500',
                                      overflow: 'hidden',
                                      width: 80,
                                  },
                                  ratio: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#009C5E',
                                      fontWeight: '500',
                                      overflow: 'hidden',
                                      width: 80,
                                  },
                                  text: {
                                      fontSize: 14,
                                      lineHeight: 16,
                                      color: '#999',
                                      overflow: 'hidden',
                                      width: 60,
                                  }
                              }
                          },
                      },
                     */
                    {
                        icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                        orient: 'vertical',
                        top: '45%',
                        data: testSeries1,
                        left: 0,
                        itemGap: 15,
                        type: 'scroll',
                        formatter: function (params) {
                            let value = "", ratio = "", code = "";
                            testSeries1.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                    code = item.oldSpecCode || '';
                                }
                            });
                            return [`{name|${params.length > 13 ? params.substr(0, 10) + '...' : params}}{code|${code.length > 18 ? code.substr(0, 15) + '...' : code}} {value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 12,
                                    lineHeight: 16,
                                    color: '#000',
                                    width: 100,
                                    overflow: 'hidden',
                                    padding: [0, 10, 0, 0],
                                },
                                code: {
                                    fontSize: 12,
                                    lineHeight: 14,
                                    color: '#000',
                                    width: 150,
                                    overflow: 'hidden',
                                    padding: [0, 10, 0, 0],
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 100,
                                    padding: [0, 10, 0, 0],
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#009C5E',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 60,
                                },
                                text: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#999',
                                    overflow: 'hidden',
                                    width: 60,
                                }
                            }
                        },
                    },
                ],
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = '', code = '';
                        if (parms.data.oldSpecCode) {
                            code = "<div style='word-wrap:break-word;'>规格：" + parms.data.oldSpecCode + "</div>"
                        } else {
                            code = ""
                        }
                        str = "<div style='white-space:pre-line;border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" + code +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div  style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                series: [{
                    type: "pie",
                    radius: ["30%", '80%'],
                    avoidLabelOverlap: false,
                    startAngle: 0,
                    center: ["50%", "0%"],
                    roseType: "area",
                    data: seriesData,
                    itemStyle: {
                        normal: {
                            label: {show: false}
                        }
                    },
                }]
            };

            option && myChart.setOption(option, true);
        }

        //模板16
        function showReportTemplate16(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let xAxisData = [], seriesData = [], option, titleText = '0';
            let data = _data.data.data.slice(0, 10);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                xAxisData.push(item.name);
                seriesData.push(item);
            });

            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }

            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }

            if (_data.data.sum) {
                titleText = _data.data.sum.value
            } else if (_data.data.totalSumOne) {
                titleText = _data.data.totalSumOne[0].value
            }


            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let code = '', str;
                        if (parms.data.oldSpecCode) {
                            code = "<div style='word-wrap:break-word;'>规格：" + parms.data.oldSpecCode + "</div>"
                        } else {
                            code = ""
                        }

                        str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" + code +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                title: {
                    text: priceUnit(titleText),
                    subtext: _data.parameter.param === 'money' ? '暂存物料金额' : '暂存总数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '19%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: {
                    orient: 'vertical',
                    left: '50%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 4,
                    itemHeight: 44,
                    type: 'scroll',
                    itemStyle: {
                        borderRadius: 30,
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        let value = "", ratio = "", skuCode = '';
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                                skuCode = item.oldSpecCode
                            }

                        });
                        return [`{name|${params}}\n{skuCode|${skuCode}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        rich: {
                            skuCode: {
                                fontSize: 12,
                                lineHeight: 14,
                                color: '#333333',
                                // width: '100%',
                                overflow: 'hidden'
                            },
                            name: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#000',
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                                fontWeight: '500',
                                width: 80,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#009C5E',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                series: [
                    {
                        type: "pie",
                        center: ['20%', '50%'],
                        radius: ["28%", "50%"],
                        itemStyle: {
                            normal: {
                                // borderWidth: 2,
                                // borderColor: "#fff"
                            }
                        },
                        label: {
                            show: false
                        },
                        data: seriesData,
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板17
        function showReportTemplate17(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option, titleText = 0;
            let data = _data.data.data.slice(0, 10);

            data.forEach((item, index) => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }

            if (_data.data.sum) {
                titleText = _data.data.sum.value
            } else if (_data.data.totalSumOne) {
                titleText = _data.data.totalSumOne[0].value
            }

            option = {
                color: colorList,
                title: {
                    text: priceUnit(titleText),
                    subtext: _data.parameter.param === 'money' ? '暂存物料金额' : '暂存物料',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '21.5%',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: [
                    /*{
                        data: seriesData.slice(0, Math.ceil(seriesData.length / 2)),
                        orient: 'vertical',
                        right: 130,
                        top: 'center',
                        align: 'left',
                        itemWidth: 4,
                        itemHeight: 30,
                        itemStyle: {
                            borderRadius: '30',
                        },
                        textStyle: {
                            color: "#333"
                        },
                        itemGap: 15,
                        formatter: function (params) {
                            let value = "", ratio = "";
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                }

                            });
                            return [`{name|${params}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            width: 130,
                            rich: {
                                name: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#000',
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                    fontWeight: '500',
                                    width: 50,
                                    overflow: 'hidden',
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#009C5E',
                                    fontWeight: '500'
                                },
                            }
                        },
                    },
                    {
                        data: seriesData.slice(Math.ceil(seriesData.length / 2)),
                        orient: 'vertical',
                        right: '0%',
                        top: 'center',
                        align: 'left',
                        itemWidth: 4,
                        itemHeight: 30,
                        itemStyle: {
                            borderRadius: '30',
                        },
                        textStyle: {
                            color: "#333"
                        },
                        itemGap: 15,
                        formatter: function (params) {
                            let value = "", ratio = "";
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                }

                            });
                            return [`{name|${params}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            width: 130,
                            rich: {
                                name: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#000',
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                    fontWeight: '500',
                                    width: 50,
                                    overflow: 'hidden',
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#009C5E',
                                    fontWeight: '500'
                                },
                            }
                        },
                    },*/
                    {
                        data: seriesData,
                        orient: 'vertical',
                        right: '0%',
                        top: 'center',
                        align: 'left',
                        itemWidth: 4,
                        itemHeight: 20,
                        itemStyle: {
                            borderRadius: '30',
                        },
                        textStyle: {
                            color: "#333"
                        },
                        itemGap: 15,
                        formatter: function (params) {
                            let value = "", ratio = "";
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                }

                            });
                            return [`{name|${params.length > 13 ? params.substr(0, 10) + "..." : params}} {value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 12,
                                    lineHeight: 16,
                                    color: '#000',
                                    width: 90,
                                },
                                value: {
                                    fontSize: 12,
                                    lineHeight: 16,
                                    color: '#333',
                                    fontWeight: '500',
                                    width: 90,
                                    overflow: 'hidden',
                                },
                                ratio: {
                                    fontSize: 12,
                                    lineHeight: 16,
                                    color: '#009C5E',
                                    fontWeight: '500',
                                    width: 55
                                },
                            }
                        },
                    },
                ],
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                series: [
                    // 主要展示层的
                    {
                        radius: ['25%', '50%'],
                        center: ['23%', '50%'],
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },
                    // 边框的设置
                    {
                        color: 'rgba(250,250,250,0.5)',
                        radius: ['47%', '52%'],
                        center: ['23%', '50%'],
                        label: {show: false},
                        type: 'pie',
                        data: [{value: 1}],
                        tooltip: {
                            show: false
                        }
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板18
        function showReportTemplate18(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let yAxisData = [], seriesData = [], option = {};
            let data = _data.data.slice(0, 10);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                yAxisData.push(item.name);
                seriesData.push(item);
            });

            option = {
                tooltip: {
                    trigger: "axis",
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms[0].data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms[0].data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms[0].data.name + "</div></div>";
                        return str;
                    }
                },
                grid: {
                    left: '0',
                    right: '10%',
                    bottom: '0',
                    top: '0',
                    containLabel: true
                },
                xAxis: [{
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        show: false, // 设置不显示刻度值
                    },
                    type: 'value',
                    show: true,
                    axisTick: {show: false},
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#333',
                        }
                    },

                }],
                yAxis: [{
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: yAxisData,
                    axisLabel: {
                        formatter: (v) => v.slice(0, 10)
                    }
                }],
                series: [{
                    type: 'bar',
                    color: '#72B65F',
                    barWidth: 8, // 柱子宽度
                    label: {
                        show: true,
                        position: 'right', // 位置
                        color: '#333333',
                        fontSize: 12,
                        fontWeight: '400', // 加粗
                        distance: 5, // 距离
                        rich: {
                            val: {
                                color: '#333333',
                            },
                            ratio: {
                                color: '#009C5E'
                            }
                        },
                        formatter: function (param) {
                            return '{val|' + param.data.value + ' }{ratio|' + isNullObj(param.data.ratio) + '}';
                        },
                    }, // 柱子上方的数值

                    data: seriesData,
                },]
            };

            option && myChart.setOption(option, true);
        }

        //模板19
        function showReportTemplate19(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option, titleText = 0;
            let data = _data.data.data.slice(0, 10);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });
            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.sum) {
                titleText = _data.data.sum.value
            } else if (_data.data.totalSumOne) {
                titleText = _data.data.totalSumOne[0].value
            }

            option = {
                color: colorList,
                title: {
                    text: priceUnit(titleText),
                    subtext: _data.parameter.param === 'money' ? '总规格金额' : '总规格数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: '18%',
                    x: '48.5%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: [
                    /* {
                         icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                         orient: 'vertical',
                         top: '40%',
                         data: seriesData.slice(0, Math.ceil(seriesData.length / 2)),
                         left: 0,
                         itemGap: 10,
                         type: 'scroll',
                         formatter: function (params) {
                             let value = "", ratio = "", code = '';
                             seriesData.forEach(item => {
                                 if (item.name == params) {
                                     value = item.value;
                                     ratio = item.ratio;
                                     code = item.oldSpecCode || '';
                                 }
                             });
                             return [`{name|${params}}\n{code|${code}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                         },
                         textStyle: {
                             rich: {
                                 name: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#000',
                                     width: '100%',
                                     overflow: 'hidden',
                                 },
                                 code: {
                                     fontSize: 12,
                                     lineHeight: 14,
                                     color: '#000',
                                     width: '100%',
                                     overflow: 'hidden',
                                 },
                                 value: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#333',
                                     fontWeight: '500',
                                     overflow: 'hidden',
                                     width: 40,
                                 },
                                 ratio: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#009C5E',
                                     fontWeight: '500',
                                     overflow: 'hidden',
                                     width: 40,
                                 },
                                 text: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#999',
                                     overflow: 'hidden',
                                     width: 60,
                                 }
                             }
                         },
                     },
                     {
                         icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                         orient: 'vertical',
                         top: '40%',
                         data: seriesData.slice(Math.ceil(seriesData.length / 2)),
                         left: '55%',
                         itemGap: 10,
                         type: 'scroll',
                         formatter: function (params) {
                             let value = "", ratio = "", code = '';
                             seriesData.forEach(item => {
                                 if (item.name == params) {
                                     value = item.value;
                                     ratio = item.ratio;
                                     code = item.oldSpecCode || '';
                                 }
                             });
                             return [`{name|${params}}\n{code|${code}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                         },
                         textStyle: {
                             rich: {
                                 name: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#000',
                                     width: '100%',
                                     overflow: 'hidden',
                                 },
                                 code: {
                                     fontSize: 12,
                                     lineHeight: 14,
                                     color: '#000',
                                     width: '100%',
                                     overflow: 'hidden',
                                 },
                                 value: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#333',
                                     fontWeight: '500',
                                     overflow: 'hidden',
                                     width: 40,
                                 },
                                 ratio: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#009C5E',
                                     fontWeight: '500',
                                     overflow: 'hidden',
                                     width: 40,
                                 },
                                 text: {
                                     fontSize: 14,
                                     lineHeight: 16,
                                     color: '#999',
                                     overflow: 'hidden',
                                     width: 60,
                                 }
                             }
                         },
                     },
                */
                    {
                        icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                        orient: 'vertical',
                        top: '45%',
                        data: seriesData,
                        left: 0,
                        itemGap: 15,
                        type: 'scroll',
                        formatter: function (params) {
                            let value = "", ratio = "", code = "";
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                    code = item.oldSpecCode || '';
                                }
                            });
                            return [`{name|${params.length > 13 ? params.substr(0, 10) + '...' : params}}{code|${code.length > 18 ? code.substr(0, 15) + '...' : code}} {value|${value}} {ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 12,
                                    lineHeight: 16,
                                    color: '#000',
                                    width: 100,
                                    overflow: 'hidden',
                                    padding: [0, 10, 0, 0],
                                },
                                code: {
                                    fontSize: 12,
                                    lineHeight: 14,
                                    color: '#000',
                                    width: 150,
                                    overflow: 'hidden',
                                    padding: [0, 10, 0, 0],
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#333',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 100,
                                    padding: [0, 10, 0, 0],
                                },
                                ratio: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#009C5E',
                                    fontWeight: '500',
                                    overflow: 'hidden',
                                    width: 60,
                                },
                                text: {
                                    fontSize: 14,
                                    lineHeight: 16,
                                    color: '#999',
                                    overflow: 'hidden',
                                    width: 60,
                                }
                            }
                        },
                    },
                ],
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                series: {
                    radius: ['32%', '40%'],
                    center: ['50%', '22%'],
                    type: 'pie',
                    label: {show: false},
                    data: seriesData,
                },
            };
            option && myChart.setOption(option, true);
        }

        //模板20
        function showReportTemplate20(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let xAxisData = [], seriesData = [], seriesData1 = [], option;
            let data = _data.data.data.slice(0, 8);
            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                xAxisData.push(item.name);
                seriesData.push(item.value);
                seriesData1.push(item.ratio);
            });
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }

            option = {
                grid: {
                    left: '0',
                    right: '0',
                    bottom: "20",
                    top: '30',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '0',
                    data: ['采购数量', '占比']
                },
                xAxis: [{
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        color: '#333333',
                        rotate: -20,  //旋转
                        textStyle: {
                            fontSize: 12
                        },
                        formatter: (v) => v.slice(0, 10)
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(107,107,107,0.37)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                }],
                yAxis: [
                    {
                        type: 'value',
                        position: 'left',
                        axisLabel: {
                            color: '#333333',
                            textStyle: {
                                fontSize: 12
                            },
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(107,107,107,0.37)',
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 100,
                        position: 'right',
                        axisLabel: {
                            color: '#333333',
                            textStyle: {
                                fontSize: 12
                            },
                            formatter: '{value} %'
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(107,107,107,0.37)',
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed',
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '采购数量',
                        type: 'bar',
                        barWidth: 16, // 柱子宽度
                        color: '#009C5E',
                        data: seriesData
                    },
                    {
                        name: '占比',
                        type: 'line',
                        color: '#FF8400',
                        yAxisIndex: 1,
                        lineStyle: {
                            normal: {
                                width: 2,
                                shadowColor: 'rgba(255,255,255,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                        data: seriesData1
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        //模板21
        function showReportTemplate21(_data, _elem) {

            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }

            let html = "";
            if (!_data.data.data || _data.data.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _data.data.data.slice(0, 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value;

                    }
                    html += `<div class="listItem5">
                                <div class="listItem5Top">
                                    <div class="listItem5Name" title="${item.name}">${item.name}</div>
                                    <div class="listItem5Code">${item.oldSpecCode}</div>
                                </div>
                                <div class="listItem5ProgressBox">
                                    <div class="listItem5ProgressBar" style="width: ${(item.value / refer) * 100}%" val="${item.value}" ratio="${isNullObj(item.ratio)}"></div>
                                </div>
                            </div>`
                })
            }
            $(_elem).html(html);
        }

        //模板22
        function showReportTemplate22(_data, _elem) {
            let html = "";
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }

            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }

            if (!_data.data.data || _data.data.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _data.data.data.slice(0, 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value;
                    }
                    html += `<div class="listItem6">
                                    <div class="listItem6Top">
                                        <div class="listItem6Name" title="${item.name}">${item.name}</div>
                                        <div class="listItem6code" title="${item.name}">${item.oldSpecCode}</div>
                                    </div>
                                    <div class="listItem6Bottom">
                                        <div class="listItem6ProgressBox">
                                            <div class="listItem6ProgressBar" style="width: ${(item.value / refer) * 100}%" val="${item.value}"></div>
                                        </div>
                                        <div class="listItem6Ratio">${isNullObj(item.ratio)}</div>
                                    </div>
                                </div>`
                })
            }
            $(_elem).html(html);
        }

        //模板23
        function showReportTemplate23(_data, _elem) {
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let seriesData = [], option;
            let data = _data.data.data.slice(0, 10);
            if (_data.data.totalSum) {
                $('#' + _data.id + ' .reportItemTips1 span').text(_data.data.totalSum[0].totalNum || 0);
                $('#' + _data.id + ' .reportItemTips2 span').text(_data.data.totalSum[0].totalAmount || 0);
            }
            if (_data.data.title) {
                $('#' + _data.id + ' .reportItemHeaderTitle').text(_data.data.title);
            }
            if (_data.data.unit) {
                $('#' + _data.id + ' .reportItemUnit').text("（单位：" + _data.data.unit + "）");
            }


            data.forEach(item => {
                if (item.name == '') {
                    item.name = ' '
                }
                seriesData.push(item);
            });

            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let code = '', str;
                        if (parms.data.oldSpecCode) {
                            code = "<div style='word-wrap:break-word;'>规格：" + parms.data.oldSpecCode + "</div>"
                        } else {
                            code = ""
                        }

                        str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" + code +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                legend: [
                    {
                        icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                        orient: 'vertical',
                        left: '0%',
                        top: '65%',
                        align: 'left',
                        type: 'scroll',
                        data: seriesData.slice(0, Math.ceil(seriesData.length / 2)),
                        itemStyle: {
                            borderRadius: '30',
                        },
                        itemGap: 10,
                        formatter: function (params) {
                            let value = "", ratio = "", skuCode = '';
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                    skuCode = item.oldSpecCode
                                }

                            });
                            return [`{name|${params.length > 12 ? params.substr(0, 10) + '...' : params}}{ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            color: "#333",
                            rich: {
                                name: {
                                    fontSize: 14,
                                    color: '#000',
                                    width: 120
                                },
                                ratio: {
                                    fontSize: 14,
                                    color: '#2CBB79',
                                }
                            }

                        },
                    },
                    {
                        icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                        orient: 'vertical',
                        right: '0%',
                        top: '65%',
                        align: 'left',
                        type: 'scroll',
                        data: seriesData.slice(Math.ceil(seriesData.length / 2)),
                        itemStyle: {
                            borderRadius: '30',
                        },
                        itemGap: 10,
                        formatter: function (params) {
                            let value = "", ratio = "", skuCode = '';
                            seriesData.forEach(item => {
                                if (item.name == params) {
                                    value = item.value;
                                    ratio = item.ratio;
                                    skuCode = item.oldSpecCode
                                }

                            });
                            return [`{name|${params.length > 12 ? params.substr(0, 10) + '...' : params}}{ratio|${isNullObj(ratio)}}`];
                        },
                        textStyle: {
                            color: "#333",
                            rich: {
                                name: {
                                    fontSize: 14,
                                    color: '#000',
                                    width: 120
                                },
                                ratio: {
                                    fontSize: 14,
                                    color: '#2CBB79',
                                }
                            }

                        },
                    }
                ],
                series: [
                    {
                        radius: ['20%', '55%'],
                        center: ['50%', '33%'],
                        roseType: 'area',
                        type: 'pie',
                        label: {show: false},
                        data: seriesData,
                    },

                ]
            };
            option && myChart.setOption(option, true);
        }

        // 判断是否是 空{}
        function isNullObj(_data) {
            if (_data) {
                if (JSON.stringify(_data) == "{}") {
                    return '0%'
                } else {
                    return _data
                }
            }
            return '0%';
        }

        //长度限制
        function limitLength(str, length) {
            // 如果字符串的长度小于等于限制的长度，则直接返回原字符串
            if (str.length <= length) {
                return str;
            }
            // 否则，只取前面限制长度的部分字符串，并在结尾加上省略号
            return str.slice(0, length) + '...';
        }

        // 更多
        $('.reportMainAll .reportItemHeaderMore').click(function () {

            if (configData[$(this).parents('.reportItem').attr('id')].data.length === 0 || configData[$(this).parents('.reportItem').attr('id')].data.data.length === 0) {
                layer.msg('暂时没有数据~~~', {icon: 5});
                return false;
            }
            showAllDataChart(configData[$(this).parents('.reportItem').attr('id')])
        });

        $('#pickingTrends .reportItemHeaderMore').click(function () {
            let objData = {
                columnType: 'double' // 区分柱状图
            };
            objData.data = pickingTrendsData;
            showAllDataChart(objData)
        });


        // 更多弹窗
        function showAllDataChart(_data) {
            console.log(_data)
            admin.open({
                type: 1,
                area: ['1400px', '700px'],
                offset: '65px',
                title: _data.name || '领料趋势变化图',
                content: $('#allDataChart').html(),
                success: function () {
                    const myChart = echarts.init(document.getElementById('allDataChartFormchartDom'));
                    let seriesData = [], yAxisData = [], option, dataZoomObj = '',seriesData1 = [];
                    let colsData = [
                        {type: 'numbers', title: '序号'}
                    ];
                    let data = _data.data.data;
                    data.forEach(item => {
                        item.label = void 0;
                        item.labelLine = void 0;
                        yAxisData.push(item.name);
                        seriesData.push(item);
                        if(item.value1 && _data.columnType == 'double' && pickingTrendsObj.param == 'qua'){
                            seriesData1.push(item.value1)
                        }
                    });
                    if (data[0].name) {
                        var title = "";
                        if(_data.id == "equipmentPicking"){
                            title = "设备";
                        }else if(_data.id == "personnelPicking" || _data.id == "abnormalEnrollment"){
                            title = "人员";
                        }else if(_data.id == "workOrderPicking"){
                            title = "工单";
                        }else if(_data.id == "shopFloorPicking"){
                            title = "车间";
                        }else if(_data.id == "vendorItemConsumption"){
                            title = "供应商";
                        }else if(_data.id == "productPicking" || _data.id == "theItemIsNotReturned" || _data.id == "stageTheItem" || _data.id == "materialBillModel"
                                || _data.id == "specificationsOfMaterialsForRepair" || _data.id == "reportLostItems"){
                            title = "物料";
                        }else if(_data.id == "pickingBrand" || _data.id == "stagingItemBranding"){
                            title = "品牌";
                        }else if(_data.id == "materialConsumptionSmartCabinet"){
                            title = "智能柜";
                        }else if(_data.id == "pickingItemClassification"){
                            title = "物料分类";
                        }else if(_data.id == "theCauseOfTheException"){
                            title = "原因";
                        }else if(_data.id == "costCenter"){
                            title = "成本中心";
                        }
                        title += "名称";
                        colsData.push({field: 'name', title: title})
                    }
                    if (data[0].value) {
                        if(_data.columnType == 'double'){
                            colsData.push({field: 'value', title: '数量(基础单位计)'})
                        }else {
                            colsData.push({field: 'value', title: '值'})
                        }
                    }
                    if (data[0].value1 && _data.columnType == 'double' && pickingTrendsObj.param == 'qua') {
                        colsData.push({field: 'value', title: '数量(包装计)'})
                    }
                    if (data[0].ratio) {
                        colsData.push({field: 'ratio', title: '占比'})
                    }
                    if (data[0].oldSpecCode && _data.id != "pickingItemClassification") {
                        colsData.push({field: 'oldSpecCode', title: '物料规格'})
                    }
                    if (data[0].skuCode) {
                        colsData.push({field: 'skuCode', title: '物料编号'})
                    }
                    if (data[0].productCategoryName) {
                        colsData.push({field: 'productCategoryName', title: '物料分类'})
                    }



                    if (seriesData.length > 10) {
                        dataZoomObj = {
                            type: 'slider',
                            show: true,
                            right: 5,
                            width: 20,
                            start: 100 - (10 / seriesData.length) * 100,
                            end: 100,
                            yAxisIndex: 0,
                            handleStyle: {color: "#009C5E"},
                            textStyle: {color: "#000"},
                            fillerColor: "rgb(0,181,89,0.3)",
                            borderColor: "rgb(0,181,89,0.3)",
                        }
                    } else {
                        dataZoomObj = ''
                    }
                    option = {
                        color: ['#2CBB79'],
                        tooltip: {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let str = '', code = '', time = '',numValue='';
                                if (parms[0].data.oldSpecCode && _data.id != "pickingItemClassification") {
                                    code = "<div>规格：" + parms[0].data.oldSpecCode + "</div>"
                                } else {
                                    code = ""
                                }
                                if (parms[0].data.time) {
                                    time = "<div><span style='color:#999'>" + parms[0].data.time + "</span></div>"
                                }
                                if(_data.columnType == 'double' && pickingTrendsObj.param == 'qua' && parms[0].data.value1){
                                    numValue = "<div>数量(基础单位计算)：" + parms[0].data.value + "</div>" +
                                        "<div style='color:#00BFFF'>数量(包装计算)：" + parms[0].data.value1 + "</div>"
                                }else {
                                    numValue = "<div>数值：" + parms[0].data.value + "</div>"
                                }

                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;color: #2CBB79'>" +
                                    numValue +
                                    "<div>占比：" + isNullObj(parms[0].data.ratio) + "</div>" + code +
                                    "<div>名称：" + parms[0].data.name + "</div>" + time +
                                    "</div>";
                                return str;
                            }
                        },
                        grid: {
                            left: '0',
                            right: '8%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: _data.name ? (_data.id == 'pickingTime' ? yAxisData : [...yAxisData].reverse()) : yAxisData,
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                                formatter: (v) => {
                                    if (v.length > 10) {
                                        v = v.substring(0, 15) + '...';
                                    }
                                    return v;
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        dataZoom: dataZoomObj,
                        series: [
                            {
                                name: _data.data.title,
                                type: 'bar',
                                barWidth: '15',
                                data: _data.name ? [...seriesData].reverse() : seriesData,
                                markLine: {
                                    data: [{
                                        type: 'average',
                                        name: '平均值'
                                    }],
                                    label: {
                                        normal: {
                                            formatter: '平均值:\n {c}'
                                        }
                                    },
                                    lineStyle: {
                                        normal: {
                                            color: '#FFB94D'
                                        }
                                    },
                                },
                                label: {
                                    show: true,
                                    position: 'right', // 位置
                                    color: '#333333',
                                    fontSize: 12,
                                    fontWeight: '400', // 加粗
                                    distance: 5, // 距离
                                    rich: {
                                        val: {
                                            color: '#333333',
                                        },
                                        ratio: {
                                            color: '#009C5E'
                                        }
                                    },
                                    formatter: function (param) {
                                        return '{val|' + param.data.value + ' } {ratio|' + isNullObj(param.data.ratio) + '}';
                                    },
                                },
                            },
                            {
                                name: _data.data.title,
                                type: 'bar',
                                // stack: '1',
                                barWidth: '15',
                                data: _data.name ? [...seriesData1].reverse() : seriesData1,
                                itemStyle: { //柱子颜色
                                    normal: {
                                        color: '#00BFFF',
                                    }
                                },
                                label: {
                                    show: true,
                                    position: 'right', // 位置
                                    color: '#333333',
                                    fontSize: 12,
                                    fontWeight: '400', // 加粗
                                },
                            }
                        ]
                    };

                    option && myChart.setOption(option, true);


                    let allDataChartTb = table.render({
                        elem: '#allDataChartTable',
                        data: data,
                        cellMinWidth: 100,
                        page: false,
                        cols: [colsData],
                    });

                    if (data.length === 0) {
                        $('#allDataChartFormExport').remove();
                    } else {
                        $('#allDataChartFormExport').click(function () {
                            table.exportFile(allDataChartTb.config.id, data, 'xls', _data.name || '领料趋势变化图');
                        })
                    }

                }
            });

        }

        // 渲染下拉框
        function loadReportSelectHtml(data, tips, htmltarget, type, parentName) {
            let html = ' <option value="">' + tips + '</option>';
            if (!data || data == null) {
                return;
            }
            for (let i = 0; i < data.length; i++) {
                if (type == 1) {
                    html += `<option value='${data[i].name}'>${data[i].name}</option>`;
                } else if (type == 2) {
                    html += `<option value='${data[i].cabCode}'>${data[i].cabCode}</option>`;
                }
            }
            $("#" + parentName).find("select[name='" + htmltarget + "']").html(html);
            form.render('select');
        }

        //单位
        function priceUnit(num) {
            let unit = ['', '万', '亿', '万亿'];
            let k = 10000, i;
            if (num < k) {
                return num
            } else {
                i = Math.floor(Math.log(num) / Math.log(k));
                return (num / Math.pow(k, i)).toFixed(2) + unit[i]
            }
        }
    });
</script>
